{{extend './common/layout.html'}}

{{block 'main'}}
<!-- 头部 -->
{{include './common/header.html'}}
<!-- /头部 -->
<!-- 主体内容 -->
<div class="content">
    <!-- 侧边栏 -->
    {{include './common/aside.html'}}
    <!-- 侧边栏 -->
    <div class="main">
        
        <!-- 分类标题 -->
        <div class="title">
            <h4>{{@userInfo?userInfo._id:''}}</h4>
            
        </div>
        <!-- /分类标题 -->
        <!-- 
            enctype 指定表单编码类型
            默认application/x-www-form-urlencoded
            mutipart/form-data 编码成二进制类型，涉及文件上传
        -->
        <form class="form-container" action="article-add" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <label>标题</label>
                <input type="text" class="form-control" placeholder="请输入文章标题" name="title" minlength="2" maxlength="20" required>
            </div>
            <div class="form-group">
                <label>作者</label>
                <input type="text" class="form-control" readonly name="author" value="{{@userInfo?userInfo._id:''}}" required>
            </div>
            <div class="form-group">
                <label>发布时间</label>
                <input type="date" class="form-control" name="publishDate" >
            </div>

            <div class="form-group">
                <label for="exampleInputFile">文章封面</label>
                <input type="file" id="file" name="cover">
                <div class="thumbnail-waper">
                    <img class="img-thumbnail" src="" id="preview">
                </div>
            </div>
            <div class="form-group">
                <label>内容</label>
                <textarea class="form-control" id="editor" name="content"></textarea>
            </div>
            <div class="buttons">
                <input type="submit" class="btn btn-primary">
            </div>
        </form>

    </div>
</div>
<!-- /主体内容 -->
{{/block}}

{{block 'script'}}
<script src="lib/ckeditor5/ckeditor.js"></script>
<script type="text/javascript">

    let editor;

        ClassicEditor
            .create(document.querySelector('#editor'))
            .then(newEditor => {
                editor = newEditor;
            })
            .catch(error => {
                console.error(error);
            });

        // 获取数据
        // const editorData = editor.getData();
        
        $('#file').on('change',function(e){
             // 创建文件读取对象
            var reader = new FileReader();
            // 读取文件，并转化为二进制
            reader.readAsDataURL(this.files[0]);
            
            //监听onload事件
            reader.onload = () => {
                $('#preview').attr('src',reader.result)
            }
        }) 
           
        
</script>
{{/block}}